<template>
  <div>
    <el-table
      :data="dataSource"
      style="width: 100%"
      :header-row-style="headerRowStyle"
      :row-style="rowStyle"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row class="fontClass">
            <el-col :span="3">计算项目编号</el-col>
            <el-col :span="21">
              {{ props.row.preId }}
            </el-col>
          </el-row>

          <el-row class="fontClass">
            <el-col :span="3">计算项目名称</el-col>
            <el-col :span="21">
              {{ props.row.name }}
            </el-col>
          </el-row>

          <el-row class="fontClass">
            <el-col :span="3">工作流模型</el-col>
            <el-col :span="21">
              {{ props.row.workflowId }}
            </el-col>
          </el-row>
          <el-row class="fontClass">
            <el-col :span="3">创建时间</el-col>
            <el-col :span="21">
              {{ props.row.createTime }}
            </el-col>
          </el-row>

          <el-row class="fontClass">
            <el-col :span="3">创建人</el-col>
            <el-col :span="21">
              {{ props.row.createUser }}
            </el-col>
          </el-row>

          <el-row class="fontClass">
            <el-col :span="3">描述</el-col>
            <el-col :span="21">
              {{ props.row.description }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="计算项目编号"
        prop="oid"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="计算项目名称"
        prop="name"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column
        label="创建人"
        prop="createUser"
        align="center"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="状态"
        prop="status"
        align="center"
      ></el-table-column>

      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goDetail(scope.row)">
            查看计算结果
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'CalculationItemList',
    props: {
      /*结构树数据源*/
      dataSource: {
        type: Array,
        required: false,
        default: () => {
          return [
            {
              id: 1,
              name: '计算项目001',
              owner: 'admin',
              creatTime: '2020-7-20',
              status: 1,
              workFlowID: 'wf-001',
              rate: 10,
              currentActivity: '计算项目001',
            },
            {
              id: 2,
              name: '计算项目002',
              owner: 'admin',
              creatTime: '2020-7-21',
              status: 2,
              workFlowID: 'wf-001',
              rate: 30,
              currentActivity: '计算项目002',
            },
            {
              id: 3,
              name: '计算项目003',
              owner: 'admin',
              creatTime: '2020-7-22',
              status: 3,
              workFlowID: 'wf-001',
              rate: 70,
              currentActivity: '计算项目003',
            },
          ]
        },
      },
    },
    data() {
      return {
        headerRowStyle: {
          'font-size': '13px',
        },
        rowStyle: {
          'font-size': '12px',
        },
      }
    },
    methods: {
      goDetail: function (row) {
        this.$router.push({
          path: '/workFlow/WFCalResult',
          query: { calProject: row },
        })
      },
    },
  }
</script>

<style scoped>
  .el-form-item {
    margin: 0;
  }
  .fontClass {
    font-size: 12px;
    margin-bottom: 10px;
  }
</style>
